<template>
	<view class="flex-col page">
		<u-navbar title="创建计划" title-color="#333" :background="background"></u-navbar>

		<view class="flex-col group">
			<view class="flex-col group_3">
				<view v-for="(item,index) in list" :key="index" class="flex-col relative section mt-20">
					<image @click="delTiao(index)" v-if="index != 0" src="/static/image/haoduogeni/del-tiao-icon.png" style="width: 20rpx;height: 20rpx;position: absolute;right: 20rpx;top: 20rpx;" mode=""/>
					<!-- <van-icon size="20px" @click="delTiao" data-index="{{index}}" v-if="{{index != 0}}" name="cross"
						style="position: absolute;right: 20rpx;top: 20rpx;" /> -->
					<textarea maxlength="-1" class="textarea-class" placeholder="这一刻的想法..." v-model="item.title" />
					<view class="flex-col group_4 mt-20">
						<view
							class="flex-row self-stretch " :class="(item.imgs.length>=0 && item.imgs.length<4) ? 'grid1' : (item.imgs.length>3 && item.imgs.length<7) ? 'grid2' : 'grid3'">
							<view style="position: relative;" v-for="(items,indexs) in item.imgs" :key="indexs">
								<image @click="preViewImg(item.imgs,index,indexs)"  class="image_3" :src="items.url" />
								<!-- <van-icon @click="delImg" data-index="{{index}}" data-indexs="{{indexs}}" name="cross"  style="position: absolute;right: 20rpx;top: 20rpx;"/> -->
								<image @click="delImg(index,indexs)"
									src="/static/image/haoduogeni/remove-img-icon.png" mode=""
									style="position: absolute;right: 20rpx;top: 20rpx;width: 40rpx;height: 40rpx;" />
							</view>

							<view v-if="item.imgs.length < 9" @click="onRead(index)" class="flex-col justify-start items-center image-wrapper">
								<image class="image_4" src="/static/image/haoduogeni/add-sucai.png" />
							</view>
						</view>
						<text class="self-start font text_3">发布时间</text>
						<view class="flex-row self-stretch group_5">
							<!-- <view class="flex-col justify-start items-center text-wrapper"><text class="font_2">立即发布</text></view> -->
							<view v-for="(items,indexs) in typeList" :key="indexs"
								@click="changeType(index,indexs)" class="flex-col justify-start items-center" :class="[item.publishType == (indexs+1) ? 'text-wrapper_2' : 'text-wrapper',indexs != 0 ? 'ml-10-5' : '']">
								<text :class="item.publishType == (indexs+1) ? 'font_2 text_4' : 'font_2 '">{{items.title}}</text>
							</view>
							<!-- <view class="flex-col justify-start items-center text-wrapper view ml-10-5">
		              <text class="font_2">循环发布</text>
		            </view> -->
						</view>
						<view v-if="item.publishType == 2" @click="selectTime(index)" class="flex-row justify-between self-stretch section_2">
							<text
								class="self-start text_5">{{item.publishTime == '' ? '请选择时间' : item.publishTime}}</text>
							<image class="image_5" src="/static/image/haoduogeni/date-icon.png" />
						</view>
						<view class="flex-row mt-20" v-if="item.publishType == 2">
							<view>是否循环：</view>
							<u-radio-group size="40" style="display: flex;" v-model="item.publishLoop" @change="onChange">
										<u-radio
											key="0" 
											name="0"
											 active-color="#01af84"
										>
											是
										</u-radio>
										<u-radio
											key="1" 
											name="1"
											 active-color="#01af84"
										>
											否
										</u-radio>
									</u-radio-group>
						</view>



						<view v-if="item.publishType == 3 || (item.publishType == 2 && item.publishLoop == 0)"
							class="flex-row justify-between items-center self-stretch group_55">
							<text class="font_33">次数</text>
							<view class="section_22 flex-row justify-center items-center">
								<input type="number" v-model="item.num" style="text-align: center;padding: 0 8rpx;" />
							</view>
							<text class="font_33">间隔时间（分钟）</text>
							<view class="section_33 flex-row justify-center items-center">
								<input type="number" v-model="item.time" style="text-align: center;padding: 0 8rpx;" />
							</view>
						</view>
					</view>
				</view>
				<view @click="addOne" class="mt-14 flex-row justify-center items-center section_3">
					<image class="image_6" src="/static/image/haoduogeni/add-icon.png" />
					<text class="ml-8 text_6">再加一条</text>
				</view>
			</view>
		</view>
		<view class="flex-row section_4">
			<view @click="addOne" class="flex-col justify-start items-center text-wrapper_3"><text
					class="font text_7">再加一条</text></view>
			<view @click="create" class="flex-col justify-start items-center text-wrapper_4 ml-15">
				<text class="font text_8">创建计划</text>
			</view>
		</view>
		<selectAccount :show="selectShow" @closeShow="closeShow" @ok="selectOk">
		</selectAccount>

		<dateTimePicker ref="datepicker" :index="timeIndex"
			@confirm="datePickerConfirm" @cancel="datePickerCancel"></dateTimePicker>

		<setPlanTitle :show="setTitleShow" @confirm="setTitleConfirm"></setPlanTitle>
		<!-- <import src="../WxEmojiView/WxEmojiView.wxml"/>
		 
		<view style="text-align: center; margin: 20px; background-color: #ddd;">
		  <template is="WxEmojiView" data="{{text: emojiText}}"/>
		</view> -->
	</view>
</template>

<script>
	import {
		imgJindu,
		addTaskList
	} from '../../haoduogeni/common/api/user';
	import {
		createTask
	} from '../../haoduogeni/common/api/send';
	import dateTimePicker from '../components/dateTimePicker/index.vue';
	import selectAccount from '../components/selectAccount/index.vue';
	import setPlanTitle from '../components/setPlanTitle/index.vue';
	export default {
		components: {
			dateTimePicker,
			selectAccount,
			setPlanTitle
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				selectShow: false,
				    content: '',
				    fileList: [],
				    imgList: [],
				    typeList: [{
				        title: '立即发布',
				        value: 1
				      },
				      {
				        title: '定时发布',
				        value: 2
				      },
				      {
				        title: '循环发布',
				        value: 3
				      }
				    ],
				    currentType: 0,
				    list: [{
				      title: "",
				      imgs: [],
				      publishType: "1", //1立即发布 2定时发布
				      publishDate: "", //定时发布日期
				      publishTime: "", //定时发布时间
				      uploadType: "1", //1图片 2视频
				      time: "", //循环发布时间
				      num: "", //循环发布次数
				      editorRef: null, //编辑器实例
				      release_promotion: "0", //0正常发布 1二维码发布
				      release_promotion_type: "1", //1图片 2链接
				      selectedKey: null,
				      selectedKeyImg: null,
				      publishLoop: "1", //定时发布是否循环 0是 1否\
				      imgsPoster: [], //海报
				    }],
				    uploadUrl: "upload.uploadPic",
				    datePickerShow: false,
				    timeIndex: 0,
				    showError: false,
				    titleIndex: 0,
				    uid: '',
				    code: '',
				    timerCheckCode: null,
				    isLoadding: false,
				    setTitleShow: false,//任务名称弹窗
				    taskName: '',//任务名称
				    user_str: [],//选中的账号id
			}
		},
		onLoad(options) {
		    if(options.obj){
				this.list = JSON.parse(options.obj);
		        this.uid = options.uid;
		    }else {
		      
		        this.uid = options.uid;
		    }
		    
		    // if(this.data.code != ''){
		    //   this.getStatusByCode()
		    // }
		  },
		methods: {
			preViewImg(imgs,index,indexs){
			    var index = index;
			    var indexs = indexs;
			    var imgs = imgs;
			    console.log(index,indexs,imgs,'preViewImg')
			    var arr = [];
			    imgs.map(item=>{arr.push(item.url)})
			    uni.previewImage({
			      current: indexs,
			      urls: arr
			    });
			  },
			  delTiao(index){
			    console.log(e,'走了么')
			    var index = index;
			    this.list.splice(index, 1);
			  },
			  delImg(index,indexs){
			    this.list[index].imgs.splice(indexs, 1);
			  },
			  createPlan(params) {
			    uni.showLoading({
			      title: '创建中',
			    })
			    this.isLoadding = true;
			    var _this = this;
			    createTask(params).then(res => {
			      //成功时回调函数
			      if (res.errno == 0) {
			        
			        this.saveCircle(res.data);
			       
			      } else {
			        uni.hideLoading();
			        this.isLoadding = false;
			        uni.showToast({
			          title: res.msg,
			          icon: 'none'
			        })
			      }
			    }).catch(err => {
			      //失败时回调函数
			      uni.hideLoading();
			        this.isLoadding = false;
			    })
			
			  },
			  saveCircle(id){
			    var _this = this;
			    addTaskList({
			      renwu_id: id,
			      pt_id: this.$ptId,
			      uid: uni.getStorageSync('userId'),
			    }).then(res => {
			      //成功时回调函数
			      console.log(res, 'getWxUser')
			      if (res.errno == 0) {
			        uni.hideLoading();
			        this.isLoadding = false;
			        uni.showToast({
			          title: '创建成功',
			          icon: 'none',
			          duration: 1000
			        })
			        setTimeout(() => {
			          uni.redirectTo({
			            url: '/haoduogeni/planList/index',
			          })
			        }, 1000)
			      } else {
			        uni.hideLoading();
			        this.isLoadding = false;
			        uni.showToast({
			          title: res.msg,
			          icon: 'none'
			        })
			      }
			    }).catch(err => {
			      //失败时回调函数
			      console.log(err)
			      uni.hideLoading();
			      this.isLoadding = false;
			    })
			    
			  },
			  
			  onChange(e) {
			    // this.data.list[this.data.titleIndex].publishLoop = e.detail;
			    // if(e.detail == 1){
			    //   this.data.list[this.data.titleIndex].num = '';
			    //   this.data.list[this.data.titleIndex].time = ''
			    // }
			    
			    // this.setData({
			    //   list: this.data.list
			    // })
			  },
			  addOne() {
			    this.list.push({
			      title: "",
			      imgs: [],
			      publishType: "1", //1立即发布 2定时发布 3循环发布、定时循环发布
			      publishDate: "", //定时发布日期
			      publishTime: "", //定时发布时间
			      uploadType: "1", //1图片 2视频
			      time: "", //循环发布时间
			      num: "", //循环发布次数
			      editorRef: null, //编辑器实例
			      release_promotion: "0", //0正常发布 1二维码发布
			      release_promotion_type: "1", //1图片 2链接
			      selectedKey: null,
			      selectedKeyImg: null,
			      publishLoop: "1", //定时发布是否循环 0是 1否\
			      imgsPoster: [], //海报
			    })
			  },
			  
			  datePickerConfirm(data) {
				  console.log(data,'datePickerConfirm')
			    var index = data.index;
			    var time = data.time;
			    this.list[index].publishTime = time;
			  },
			  datePickerCancel() {},
			  selectTime(index) {
				  console.log(index,'indexsssssss')
			    // this.datePickerShow = true;
			    this.timeIndex = index;
				this.$refs.datepicker.open();
			    
			  },
			  changeType(index,indexs) {
			    this.list[index].publishType = indexs + 1;
			    this.list[index].publishTime = '';
			    this.list[index].num = '';
			    this.list[index].time = '';
			    this.list[index].publishLoop = '1';
			  },
			  onRead(index) {
			    var _this = this;
				uni.showLoading({
				      title: '上传中',
				    })
				_this.$uploadImgNew().then(res => {
					uni.hideLoading();
					console.log(res,'res')
					if (res.errno == 0) {
					          _this.list[index].imgs.push(res.data);
					        } else {
					          uni.showToast({
					            icon: "none",
					            title: e.msg,
					            duration: 1500
					          });
					        }
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
					  icon: "none",
					  title: '上传失败',
					  duration: 1500
					});
				})
			    // uni.chooseImage({
			    //   count: 1,
			    //   sizeType: ["original", "compressed"],
			    //   sourceType: ["album", "camera"],
			    //   success: function (a) {
			    //     var o = a.tempFilePaths;
			    //     var s = o[0];
			    //     uni.showLoading({
			    //       title: '上传中',
			    //     })
			    //     uni.uploadFile({
			    //       url: api.uploadFileUrl,
			    //       filePath: s,
			    //       name: "file",
			    //       success: function (a) {
			    //         var e = JSON.parse(a.data);
			    //         uni.hideLoading();
			    //         if (e.errno == 0) {
			    //           _this.list[index].imgs.push(e.data);
			    //         } else {
			    //           uni.showToast({
			    //             icon: "none",
			    //             title: e.msg,
			    //             duration: 1500
			    //           });
			    //         }
			    //       },
			    //       fail: function (a) {
			    //         uni.hideLoading();
			    //       }
			    //     });
			    //   }
			    // });
			  },
			
			  // titleClick(e) {
			  //   var index = e.currentTarget.dataset.index;
			  //   this.setData({
			  //     titleIndex: index
			  //   })
			  // },
			  create() {
			    for (let i = 0; i < this.list.length; i++) {
			      const item = this.list[i];
			
			      // 检查 title 是否为空
			      if (item.title === '') {
			        this.showError = true;
			        uni.showToast({
			          title: '标题不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			
			      // 检查 imgs 是否为空
			      if (item.imgs.length === 0 && item.release_promotion == "0") {
			        this.showError = true;
			        uni.showToast({
			          title: '素材不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if (item.imgsPoster.length === 0 && item.release_promotion == "2") {
			        this.showError = true;
			        uni.showToast({
			          title: '海报不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if(item.release_promotion == "1" && item.release_promotion_type == 1  && item.selectedKeyImg == null){
			        this.showError = true;
			        uni.showToast({
			          title: '图片分类不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if(item.release_promotion == "1" && item.release_promotion_type == 2 && item.selectedKey == null){
			        this.showError = true;
			        uni.showToast({
			          title: '链接分类不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			
			      // 检查 publishType 为 2 时 publishDate 是否为空
			      if (item.publishType == 2 && item.publishTime == "") {
			        this.showError = true;
			        uni.showToast({
			          title: '发布时间不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if ((item.publishType == "2" && item.publishLoop == "0") && item.time == "") {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布间隔时间不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if ((item.publishType == "2" && item.publishLoop == "0") && item.num == "") {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布次数不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if ((item.publishType == "2" && item.publishLoop == "0") && item.time < 1) {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布间隔时间不能少于1分钟',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if ((item.publishType == "2" && item.publishLoop == "0") && item.time > 719) {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布间隔时间不能大于12小时',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      
			      if ((item.publishType == "2" && item.publishLoop == "0") && item.num < 1) {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布次数不能少于1次',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if (item.publishType == "3" && item.time == "") {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布时间不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if (item.publishType == "3" && item.num == "") {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布次数不能为空',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if (item.publishType == "3" && item.time < 1) {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布间隔时间不能少于1分钟',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if (item.publishType == "3" && item.time >719) {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布间隔时间不能大于12小时',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			      if (item.publishType == "3" && item.num < 1) {
			        this.showError = true;
			        uni.showToast({
			          title: '循环发布次数不能少于1次',
			          icon: 'none'
			        })
			        return; // 退出函数
			      }
			    }
			    
			    this.showError = false;
			    if(!this.showError){
			      this.selectShow = true;
			    }
			    this.selectShow = true;
			
			  },
			  setTitleConfirm(data){
			    this.taskName = data;
			    this.toCreateFormat()
			  },
			  selectOk(data) {
				  console.log(data,'aaaaaaaaaaaaaaaa')
			    this.user_str = data;
			    this.setTitleShow = true;
				// this.$refs.settitle.open();
			  },
			  toCreateFormat() {
			    var arr1 = [];
			    this.list.forEach(item => {
			      const arr2 = [];
			      // item.imgs.forEach((items) => {
			      //   arr2.push(items.response.data.id);
			      // });
			      item.imgs.forEach((items) => {
			        arr2.push(items.id);
			      });
			      arr1.push({
			        title: item.title.replace(/\n/g, '|'),
			        imgs: item.release_promotion == 0 ? arr2 : item.release_promotion == 2 ? arr3 : [],
			        // release_type: item.publishType,
			        release_type: (item.publishType == 2 && item.publishLoop == 0) ? 3 : item.publishType, //图片
			        release_time: item.publishType == 2 ?
			          item.publishDate.format("YYYY-MM-DD HH:mm") :
			          "",
			        release: 1, //图片
			        num: item.publishType == 3 ? item.num : (item.publishType == 2 && item.publishLoop == 0 ? item.num : ""), //循环次数
			        time: item.publishType == 3 ? item.time : (item.publishType == 2 && item.publishLoop == 0 ? item.time : ""), //循环时间
			        promotion: item.release_promotion, //推广类型
			        promotion_type: item.release_promotion == 1 ? item.release_promotion_type : '',
			        // promotion_ids: item.selectedKey ? item.selectedKey.toString() : '', //推广链接ID
			        promotion_ids: item.release_promotion == 1 ? (item.release_promotion_type == 2 ? (item.selectedKey ? item.selectedKey.toString() : '') : (item.selectedKeyImg ? item.selectedKeyImg.toString() : '')) : '', //推广链接ID
			      })
			    })
			    var obj = {
			      content: JSON.stringify(arr1),
			      name: this.taskName,
			      position: "",
			      uid: this.uid,
			      user_str: JSON.stringify(this.user_str),
			      user_type: 1
			    }
			    this.createPlan(obj);
			    // wx.navigateTo({
			    //   url: '/haoduogeni/createPlaning/index?obj=' + JSON.stringify(obj),
			    // })
			  },
			  getCurrentFormattedTime() {
			    var date = new Date();
			    var year = date.getFullYear();
			    var month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
			    var day = String(date.getDate()).padStart(2, '0');
			    var hours = String(date.getHours()).padStart(2, '0');
			    var minutes = String(date.getMinutes()).padStart(2, '0');
			    var seconds = String(date.getSeconds()).padStart(2, '0');
			    return `${year}${month}${day}${hours}${minutes}${seconds}`;
			  },
		}
	}
</script>

<style lang="less">
	@import url("../common/css/common.css");
	.u-radio__icon-wrap--checked .u-radio__icon-wrap__icon {
		display: flex !important;
	}
	.van-radio {
	  margin-right: 20rpx;
	}
	.mt-49-5 {
	  margin-top: 99rpx;
	}
	.ml-10-5 {
	  margin-left: 21rpx;
	}
	.mt-189-5 {
	  margin-top: 379rpx;
	}
	.ml-15 {
	  margin-left: 30rpx;
	}
	.mt-20 {
	  margin-top: 40rpx;
	}
	.grid1 {
	  display: grid;
	  grid-template-rows: repeat(1, minmax(0, 1fr));
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  row-gap: 16rpx;
	  column-gap: 16rpx;
	}
	.grid2 {
	  display: grid;
	  grid-template-rows: repeat(2, minmax(0, 1fr));
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  row-gap: 16rpx;
	  column-gap: 16rpx;
	}
	.grid3 {
	  display: grid;
	  grid-template-rows: repeat(3, minmax(0, 1fr));
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  row-gap: 16rpx;
	  column-gap: 16rpx;
	}
	.page {
	  background-color: #f3f7ff;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	}
	.group {
	  padding: 0 28rpx;
	}
	.image {
	  margin-left: 38rpx;
	  margin-right: 3rpx;
	  width: 655rpx;
	  height: 24rpx;
	}
	.group_2 {
	  margin-top: 62rpx;
	}
	.image_2 {
	  width: 20rpx;
	  height: 35rpx;
	}
	.pos {
	  position: absolute;
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.text {
	  color: #000000;
	  font-size: 36rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 34rpx;
	}
	.group_3 {
	  margin-top: 43rpx;
	  padding: 0 2rpx;
	  padding-bottom: 180rpx;
	}
	.section {
	  padding: 45rpx 0 30rpx 26rpx;
	  background-color: #ffffff;
	  box-shadow: 0rpx 5rpx 14.88rpx 1.12rpx #dde0e661;
	  border-radius: 16rpx;
	}
	.text_2 {
	  color: #4b4b4b;
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 48rpx;
	}
	.group_4 {
	  padding: 0 4rpx;
	}
	.image_3 {
	  width: 200rpx;
	  height: 200rpx;
	}
	.image-wrapper {
	  padding: 69rpx 0;
	  background-color: #f7f7f7;
	  width: 200rpx;
	  height: 200rpx;
	}
	.image_4 {
	  width: 62rpx;
	  height: 62rpx;
	}
	.font {
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  line-height: 29rpx;
	}
	.text_3 {
	  margin-top: 37rpx;
	  color: #000000;
	  font-weight: 500;
	}
	.group_5 {
	  margin-top: 31rpx;
	}
	.text-wrapper {
	  flex: 1 1 196rpx;
	  padding: 20rpx 0;
	  background-color: #f7f7f7;
	  border-radius: 12rpx;
	  height: 64rpx;
	}
	.font_2 {
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 25rpx;
	  color: #000000;
	}
	.text-wrapper_2 {
	  padding: 20rpx 0;
	  flex: 1 1 196rpx;
	  background-image: linear-gradient(90deg, #00ceb8 0%, #0fcd99 100%);
	  border-radius: 12rpx;
	  height: 64rpx;
	}
	.text_4 {
	  color: #ffffff;
	  font-weight: 500;
	}
	.view {
	  margin-right: 26rpx;
	}
	.section_2 {
	  margin-right: 26rpx;
	  margin-top: 28rpx;
	  padding: 9rpx 22rpx 0;
	  background-color: #f7f7f7;
	  border-radius: 12rpx;
	}
	.text_5 {
	  margin-top: 11rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  line-height: 23rpx;
	}
	.image_5 {
	  width: 60rpx;
	  height: 55rpx;
	}
	.section_3 {
	  padding: 22rpx 0;
	  background-color: #ffffff1a;
	  border-radius: 12rpx;
	  border-left: dashed 1rpx #01ceb7;
	  border-right: dashed 1rpx #01ceb7;
	  border-top: dashed 1rpx #01ceb7;
	  border-bottom: dashed 1rpx #01ceb7;
	}
	.image_6 {
	  width: 36rpx;
	  height: 36rpx;
	}
	.text_6 {
	  color: #07cda9;
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 27rpx;
	}
	.section_4 {
	  padding: 40rpx 28rpx;
	  background-color: #ffffff;
	  box-shadow: 0rpx -4rpx 24.04rpx 2.98rpx #d4d4d430;
	  z-index: 99;
	}
	.text-wrapper_3 {
	  padding: 30rpx 0;
	  flex: 1 1 330rpx;
	  background-color: #effaf8;
	  border-radius: 44rpx;
	  height: 88rpx;
	}
	.text_7 {
	  color: #009d67;
	}
	.text-wrapper_4 {
	  padding: 30rpx 0;
	  flex: 1 1 330rpx;
	  background-image: linear-gradient(90deg, #00ceb8 0%, #0fcd99 100%);
	  border-radius: 44rpx;
	  height: 88rpx;
	}
	.text_8 {
	  color: #ffffff;
	}
	.section_4 {
	  position: fixed;
	  width: 100%;
	  left: 0;
	  bottom: 0;
	  background-color: #fff;
	  padding: 30rpx 30rpx 50rpx 30rpx;
	}
	
	.group_55 {
	  margin-top: 25rpx;
	  padding-left: 22rpx;
	}
	.font_33 {
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  line-height: 23rpx;
	  color: #000000;
	}
	.section_22 {
	  background-color: #f7f7f7;
	  border-radius: 12rpx;
	  width: 109rpx;
	  height: 65rpx;
	}
	.section_33 {
	  background-color: #f7f7f7;
	  border-radius: 12rpx;
	  width: 197rpx;
	  height: 64rpx;
	}
	.textarea-class {
	  width: 90%;
	  /* height: 100%; */
	}

</style>